<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
  <script src="./js/rem.js"></script>
</head>

<body>
  <header class="wrapper">
    <div class="top flex-between">
      <a href="" class="logo"><img src="./imgs/mi.png" alt=""></a>
      <input class="search" placeholder="唯创大法好" type="text" />
      <a href="" class="login"><img src="./imgs/user.png" alt=""></a>
    </div>
    <nav>
      <ul class="flex-between">
        <li class="flex-col-center active"><a href="">推荐</a></li>
        <li class="flex-col-center"><a href="">手机</a></li>
        <li class="flex-col-center"><a href="">智能</a></li>
        <li class="flex-col-center"><a href="">电视</a></li>
        <li class="flex-col-center"><a href="">家电</a></li>
        <li class="flex-col-center"><a href="">笔记本</a></li>
        <li class="flex-col-center down"><a href=""><img src="./imgs/down.png" alt=""></a></li>
      </ul>
    </nav>
  </header>
  <div id="content">
    <div id="carousel">
      <img src="./imgs/banner.jpg" alt="">
    </div>
    <nav id="nav" class="divider">
      <ul class="flex">
        <li><a href=""><img src="./imgs/a1.png" alt=""></a></li>
        <li><a href=""><img src="./imgs/a2.webp" alt=""></a></li>
        <li><a href=""><img src="./imgs/a3.webp" alt=""></a></li>
        <li><a href=""><img src="./imgs/a4.webp" alt=""></a></li>
        <li><a href=""><img src="./imgs/a5.webp" alt=""></a></li>
        <li><a href=""><img src="./imgs/a6.webp" alt=""></a></li>
        <li><a href=""><img src="./imgs/a7.png" alt=""></a></li>
        <li><a href=""><img src="./imgs/a8.png" alt=""></a></li>
        <li><a href=""><img src="./imgs/a9.webp" alt=""></a></li>
        <li><a href=""><img src="./imgs/a10.png" alt=""></a></li>
      </ul>
    </nav>
    <div id="banner">
      <div class="link-img left"><a href=""><img src="./imgs/n1.webp" alt=""></a></div>
      <div class="link-img right "><a href=""><img src="./imgs/n2.webp" alt=""></a></div>
      <div class="link-img right bottom"><a href=""><img src="./imgs/n3.webp" alt=""></a></div>
    </div>
    <div class="img-divider"><img src="./imgs/d1.webp" alt=""></div>
    <div class="product-list">
      <ul class="flex flex-row-evenly">
        <li class="product">
          <div class="img-box">
            <img src="./imgs/m1.jpg" alt="" class="">
            <img class="tag" src="./imgs/tag.png" alt="">
          </div>
          <div class="content">
            <h5 class="title omit">小米一号小米一号小米一号小米一号</h5>
            <p class="desc omit">一号可好了</p>
            <p class="price"> ￥666</p>
            <a class="buy" href="">立即购买</a>
          </div>
        </li>
        <li class="product">
          <img src="./imgs/m2.jpg" alt="" class="">
          <div class="content">
            <h5 class="title omit">小米二号</h5>
            <p class="desc omit">二号也可好了</p>
            <p class="price"> ￥999</p>
            <a class="buy" href="">立即购买</a>
          </div>
        </li>
        <li class="product">
          <img src="./imgs/m1.jpg" alt="" class="">
          <div class="content">
            <h5 class="title omit">小米一号小米一号小米一号小米一号</h5>
            <p class="desc omit">一号可好了</p>
            <p class="price"> ￥666</p>
            <a class="buy" href="">立即购买</a>
          </div>
        </li>
        <li class="product">
          <img src="./imgs/m2.jpg" alt="" class="">
          <div class="content">
            <h5 class="title omit">小米二号</h5>
            <p class="desc omit">二号也可好了</p>
            <p class="price"> ￥999</p>
            <a class="buy" href="">立即购买</a>
          </div>
        </li>
        <li class="product">
          <img src="./imgs/m1.jpg" alt="" class="">
          <div class="content">
            <h5 class="title omit">小米一号小米一号小米一号小米一号</h5>
            <p class="desc omit">一号可好了</p>
            <p class="price"> ￥666</p>
            <a class="buy" href="">立即购买</a>
          </div>
        </li>
        <li class="product">
          <img src="./imgs/m2.jpg" alt="" class="">
          <div class="content">
            <h5 class="title omit">小米二号</h5>
            <p class="desc omit">二号也可好了</p>
            <p class="price"> ￥999</p>
            <a class="buy" href="">立即购买</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <footer>
    <ul class="flex-between">
      <li><a href=""><img src="./imgs/tabbar1.png" alt=""><span>tabbar1</span></a></li>
      <li><a href=""><img src="./imgs/tabbar2.png" alt=""><span>tabbar2</span></a></li>
      <li><a href=""><img src="./imgs/tabbar3.png" alt=""><span>tabbar3</span></a></li>
      <li><a href=""><img src="./imgs/tabbar4.png" alt=""><span>tabbar4</span></a></li>
      <li><a href=""><img src="./imgs/user.png" alt=""><span>tabbar5</span></a></li>
    </ul>
  </footer>
</body>

</html>